<script lang="ts" setup>
import { ref, onMounted, watch, render } from "vue";
import { EditPen, Delete, Baseball, Plus } from "@element-plus/icons-vue";
import axios from "axios";
import { c } from "vite/dist/node/types.d-aGj9QkWt";
import  useAuthStore  from '@/stores/tokenstores'; 
const value = ref("");
const value1 = ref(true);
const postValue = ref();
const roleValue = ref();
const departmentValue = ref();
const input = ref("");


// 树形控件

const show = async () => {
  let res = await axios({
    url: "http://localhost:8080/user",
    params: {
      keyName: input.value,
      postValue: postValue.value,
      roleValue: roleValue.value,
    },
  });
  console.log(res);
  tableData.value = res.data;
};

const showDeptS = async () => {
  let res = await axios({
    url: "http://localhost:8080/depts",
  });
  console.log(res);
  data.value = res.data;
};

const showPost = async () => {
  let res = await axios({
    url: "http://localhost:8080/sysPost",
  });
  console.log(res);
  postoptions.value = res.data;
};

const showRole = async () => {
  let res = await axios({
    url: "http://localhost:8080/roles?page=1&size=1000",
  });
  console.log(res);
  roleoptions.value = res.data.records;
};

onMounted(() => {
  show();
  showDeptS();
  showPost();
  showRole();
});
const handleNodeClick = (data1) => {
  console.log(data1);
};

//方法
const search = () => {
  show();
};

const isnull = () => {
  input.value = "";
  postValue.value = "";
  roleValue.value = "";
};

const upstatus = async (status, id) => {
  console.log(status);

  console.log(id);
  let res = await axios({
    url: `http://localhost:8080/user/${status}/${id}`,
    method: "PUT",
  });
};

const del = async (id) => {
  // console.log(id);

  let res = await axios({
    url: `http://localhost:8080/user/${id}`,
    method: "DELETE",
  });
  show();
};

const data = ref();

const defaultProps = {
  children: "children",
  label: "name",
};

const postoptions = ref([]);
const roleoptions = ref([]);
const departmentoptions = ref([])

const tableData = ref();

const isDialog = ref(false);
const user = ref({});
// 添加
const addOrUpd = async (id) => {
  isDialog.value = true;
};

// 提交

watch(isDialog, (newValue) => {
  if (newValue == false) {
    user.value = {};
  }
});
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" id="navigation">
        <el-tree
          style="max-width: 600px"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </el-aside>
      <el-main>
        <div id="search">
          关 键 字：<el-input
            v-model="input"
            style="width: 240px"
            placeholder="用户名/姓名/手机号码"
          />
          角 色：<el-select
            v-model="roleValue"
            placeholder="角色"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in roleoptions"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
          岗 位：<el-select
            v-model="postValue"
            placeholder="岗位"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in postoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            /> </el-select
          ><br />

          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="isnull" plain>重置</el-button>
        </div>
        <div id="action">
          <el-button type="success" :icon="Plus" @click="addOrUpd(0)">添加</el-button>
        </div>
        <div id="data">
          <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="id" label="序号" width="70" />
            <el-table-column prop="username" label="用户名" width="120" />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="phone" label="手机" width="120" />
            <el-table-column prop="dept" label="岗位" width="100" />
            <el-table-column prop="post" label="部门" width="100" />
            <el-table-column prop="description" label="所属角色" width="100" />
            <el-table-column
              prop="state"
              label="状态"
              width="100"
              v-slot="scoped"
            >
              <el-switch
                v-model="scoped.row.status"
                :active-value="1"
                :inactive-value="0"
                @click="upstatus(scoped.row.status, scoped.row.id)"
              ></el-switch>
            </el-table-column>
            <el-table-column prop="time" label="创建时间" width="180" />
            <el-table-column
              prop="controls"
              label="操作"
              width="200"
              fixed="right"
              v-slot="scopedop"
            >
              <el-button type="primary" :icon="EditPen" />
              <el-button
                type="danger"
                :icon="Delete"
                @click="del(scopedop.row.id)"
              />
              <el-button type="warning" :icon="Baseball" />
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>

    <!-- 弹窗 -->
    <el-dialog v-model="isDialog" :title="title" width="500">
      <el-form-item label="用 户 名" :label-width="100">
        <el-input v-model="user.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓 名" :label-width="100">
        <el-input v-model="user.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手 机" :label-width="100">
        <el-input v-model="user.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="岗 位" :label-width="100">
        
        <el-select
          v-model="user.post"
          placeholder="岗位"
          clearable
        >
        <el-option
              v-for="item in postoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
        </el-select>
      </el-form-item>
      <el-form-item label="部门" :label-width="100">
        <el-select
          v-model="user.dept"
          placeholder="部门"
          clearable
        >
          <el-option label="北京校区" value="beijing" />
          <el-option label="上海校区" value="shanghai" />
          <el-option label="深圳校区" value="shenzhen" />
          <el-option label="人事部门" value="renshi" />
          <el-option label="教学部门" value="jiaoxue" />
          <el-option label="运营部门" value="yunying" />
          <el-option label="Java学科" value="java" />
          <el-option label="大数据学科" value="dashuju" />
          <el-option label="前端学科" value="qianduan" />
          <el-option label="客服" value="kefu" />
          <el-option label="网站推广" value="wangzhan" />
          <el-option label="线下运营" value="xianxia" />
          <el-option label="设计" value="sheji" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属角色" :label-width="100">
        <el-select
          v-model="user.roles"
          placeholder="所属角色"
          clearable
        >
          <el-option
              v-for="item in roleoptions"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
        </el-select>
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isDialog = false">取消</el-button>
          <el-button type="primary" @click="sub"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* .el-container {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
} */

#navigation {
  margin: 10px;
  border: solid, 1px, rgb(206, 206, 206);
}

#search {
  padding: 10px;
  border: solid, 1px, rgb(206, 206, 206);
}

#action {
  margin-top: 10px;
  padding: 10px;
  border: solid, 1px, rgb(206, 206, 206);
}

#data {
  margin-top: 10px;
}
</style>
